<template>
  <!-- 添加 -->
<div class="root">
  
  <div class="tianjia">

    <el-form ref="formRef" :model="numberValidateForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="审核人姓名:" prop="reviewer_name" :rules="[
        { required: true, message: '请输入审核人姓名' },
        { type: 'string', message: '请输入审核人姓名' },
      ]">
        <el-input v-model.string="numberValidateForm.reviewer_name" placeholder="请输入审核人姓名" type="text"
          autocomplete="off" />
      </el-form-item>

      <el-form-item label="openid:" prop="openid" :rules="[
        { required: true, message: '请输入openid' },
        { type: 'number', message: '请输入openid' },
      ]">
        <el-input v-model.number="numberValidateForm.openid" placeholder="请输入openid" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item label="手机号:" prop="mobile" :rules="[
        { required: true, message: '请输入手机号' },
        { type: 'number', message: '请输入手机号' },
      ]">
        <el-input v-model.number="numberValidateForm.mobile" placeholder="请输入手机号" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item label="部门" prop="department" :rules="[
        { required: true, message: '请选择部门' },
        { type: 'string[]', message: '请选择部门' },
      ]">
        <el-cascader
        v-model="parentId"
        :emitPath="false"
        class="cascader"
        :props="optprops"
         :options="options2" 
        placeholder="请选择部门"  clearable />
      </el-form-item>

      <el-form-item label="职务:" prop="job" :rules="[
        { required: true, message: '请输入你的职务' },
        { type: 'string', message: '请输入你的职务' },
      ]">
        <el-input v-model.string="numberValidateForm.job" placeholder="请输入你的职务" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item>
        <el-button @click="quxiao">取消</el-button>
        <el-button type="primary" @click="gitAdd">确定</el-button>
      </el-form-item>

    </el-form>

  </div>

</div>

</template>

<script setup lang='ts'>
  import {ref,reactive} from 'vue'
  import router from '../../router/router'
  import type { FormInstance } from 'element-plus'
  import { ElMessage } from "element-plus";
  import {add,department} from '../../api/login/index' //接口

  const formRef = ref<FormInstance>()



// 级联选择器
let parentId = ref('')  //当前选中的

let optprops = {
  value: 'name',
  label: 'name',
  children: 'son'
}

const options2 = ref([])

let options3 = async() => {
  let res = await department({})
  // console.log(res);
  options2.value = res.data
}
options3()

// 添加
const numberValidateForm = reactive({ //参数
  reviewer_name: '',
  openid: '',
  mobile: '',
  department:'',
  job: ''
})

let gitAdd = async() =>{
  numberValidateForm.department = parentId.value[parentId.value.length -1 ] //截取到最后一个值
  // console.log(numberValidateForm);
  let res:any = await add(numberValidateForm)
  if(res.code==='00000'){
    ElMessage({
      message: "添加成功",
      type: "success",
    });
    router.push('auditor')
  }
}


// 点击取消 清空表单数据
let quxiao =() =>{
  window.location.reload()
}


</script>

<style scoped lang='less'>
  .tianjia{
    width: 300px;
  }
</style>